<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue基础知识</title>

</head>
<body>
    <div id="app">

        <add></add>
        <login  username="张三" password="123456"><span slot="aa"></span></login>
        <register></register>
<!--        <html></html>-->
    </div>

</body>
</html>


<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>


<script>

    let html = "<button onclick=\"test('+id+')\">点我</button>"
    console.log(html);

    let id = 1;
    let name = "华为"
    let price = "3000"
    let count = 100

    const Goods = {id, good_name: name, price, count}
    const Good = {id, name, price, count}
    console.log("--------------")
    console.log(Good)
    console.log(Goods)

    function test() {
        for (let i = 0; i < 10; i++) {
            console.log("for in", i);
        }

        const name1 = "xiaochen";
        console.log(name1);

        const Student={id:10,username:"小明"}
        console.log(Student)
        Student.username="小雷"
        console.log(Student)

        const Students=[]
        Students.push(Student)
        console.log(Students)
    }

    test();
    //创建axios共用
    let instance = axios.create({
        baseURL: "http://localhost:9000/good/",
        timeout: 5000
    });

    //响应拦截器
    instance.interceptors.response.use(res => {
        return res;
    }, (err) => {
        alert('后端服务出错啦,请稍后再试!!!');
    });

    // Vue.component('login',{
    //     template: `<div><button @click="">登录</button></div>`
    // })
    Vue.component('register',{
        template: `<div><button @click="">注册</button></div>`
    });
    const login = {
        template:`<div id="aa">
                    <solt name="aa"><span>欢迎</span></solt>
                    <form>
                      <label>用户名</label>
                      <input type="text" v-model="user.username">
                      <label>密码</label>
                      <input type="text" v-model="user.password">
                      <input type="button" @click="login" value="提交">
                    </form>
                  </div>`,
        data(){
            return {
                counter:1,
                msg1:"我是组件msg",
                user:{username:this.username,password:this.password}
            }
        },
        methods: {
            login(){
                instance.post("/login",this.user).then(res=>console.log(res.data().msg))
            }
        },
        props: ['username','password']
    };
    var app = new Vue({
        el: "#app",
        data: {
            msg: "商品列表",

        },
        methods: {

        },
        created() {},
        //局部组件
        components:{
            add:{
                template:`<div><input type="button" value="新增"></div>`
            },
            login
        }
    })
</script>
